<template>
  <page-card title="业务条线"
             :sub-title="title"
             :need-back="true">
    <slot name="form" />
    <a-row v-if="!$slots.form">
      <a-col :span="24">
        <a-card :bodyStyle="{overflow: 'auto'}">
          <a-form :form="form"
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 22 }">

            <a-form-item label="条线名称">
              <a-input :maxLength="20"
                       placeholder="请输入条线名称"
                       v-decorator="['businessLineName', { rules: [{ required: true, message: '请填写线条名称!' }] }]" />
            </a-form-item>

          </a-form>
        </a-card>
      </a-col>

    </a-row>
    <CustomTransfer :list="selectedData"
                    @change="onChangeTransfer" />
    <div style="text-align:center; padding:30px">
      <a-space size="small">
        <slot name="buttons" />
        <template v-if="!$slots.buttons">
          <!-- <a-button v-if="$route.query.id && hasPermission('delete')"
                    action
                    @click="handleDelete"
                    style="width:80px;">删除</a-button> -->
          <a-button type="primary"
                    action
                    @click="handleSave"
                    style="width:80px;">保存</a-button>
        </template>
      </a-space>
    </div>
  </page-card>
</template>

<script>
import Vue from 'vue'
import { Card, message } from 'ant-design-vue'
import { del, unituser, save, getById, update } from '../../api/businessline/index'
import CustomTransfer from './CustomTransfer.vue'

Vue.use(Card)
export default {
  props: {
    onSave: {
      type: Function,
      default: null
    },
    onDelete: {
      type: Function,
      default: null
    }
  },
  components: {
    CustomTransfer
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      id: this.$route.query.id,
      businessLineRange: '',
      businessLineRanges: [],
      selectedData: []
    }
  },
  created () {
    if (this.id) {
      this.getLineInfo()
    }
  },
  computed: {
    title: function () {
      return this.id ? '编辑' : '新增'
    }
  },
  methods: {
    async getLineInfo () {
      const lineInfo = await getById({ id: this.id })
      this.form.setFieldsValue({
        businessLineName: lineInfo.businessLineName
      })
      this.selectedData = lineInfo.rangelist.map(item => {
        return {
          key: item.businessLineRangeId,
          title: item.businessLineRange,
          type: item.businessLineRangeType,
          fullUnitName: item.fullUnitName,
          parentIds: item.parentIds
        }
      })
    },
    handleSave () {
      this.form.validateFields((err, values) => {
        if (err) {
          console.warn('表单校验失败')
          return false
        }
        let name = values.businessLineName
        if (name == null || name.trim() == '') {
          return
        }
        if (this.businessLineRanges.length == 0) {
          message.info('请添加线条范围！')
          return
        }
        const params = {
          businessLineName: name,
          businessLineRange: this.businessLineRange,
          businessLineRanges: this.businessLineRanges
        }
        if (this.id) {
          update({ id: this.id, ...params }).then((response) => {
            this.$router.push({
              path: '/businessline'
            })
          })
        } else {
          save(params).then((response) => {
            this.$router.push({
              path: '/businessline'
            })
          })
        }
      })
    },
    onChangeTransfer (data = []) {
      this.businessLineRange = data.reduce((res, item) => {
        res += `${item.title}、`
        return res
      }, '')
      this.businessLineRange = this.businessLineRange.substring(0, this.businessLineRange.length - 1)
      this.businessLineRanges = []
      for (const item of data) {
        this.businessLineRanges.push({
          businessLineRangeId: item.key,
          businessLineRange: item.title,
          businessLineRangeType: item.type,
          fullUnitName: item.fullUnitName,
          parentIds: item.parentIds
        })
      }
    }
  }
}
</script>

<style  lang="less" scoped>
::v-deep .ant-checkbox-group-item {
  width: 100%;
  padding: 5px 0;
}
.tree-transfer .ant-transfer-list:first-child {
  width: 50%;
  flex: none;
}
/deep/.ant-table-thead {
  display: none;
}
/deep/.ant-transfer-customize-list {
  .ant-transfer-list {
    .ant-transfer-list-header {
      padding: 15px 12px;
      .ant-checkbox-wrapper {
        .ant-checkbox {
          display: none;
        }
      }
    }
    .ant-transfer-list-body-search-wrapper {
      position: absolute;
      top: -42px;
      left: 6px;
      width: 280px;
    }
    .ant-transfer-list-header-title {
      position: relative;
    }
    .ant-transfer-list-header-selected {
      display: flex;
      justify-content: flex-end;
      & > span:first-child {
        display: none;
      }
    }
  }
}
</style>
